<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="lib/weui.min.css">
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/jquery-weui.min.js"></script>
    <style>
        .container {
            margin-top: 0px;
            height: -webkit-fill-available;
        }
    </style>
</head>
<body ontouchstart>
<div class="weui-cells weui-cells_form container">
    <header class="demos-header">
        <h1 class="demos-title" style="text-align: center;margin-bottom: 10px;">jprint</h1>
    </header>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <form action="/api/file/upload" method="post" enctype="multipart/form-data">
                <div class="weui-uploader">
                    <div class="weui-uploader__bd">
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="file" name="file">
                        </div>
                    </div>
                    <input class="weui-input" type="text" id="filename" style="margin-top: 10px;">
                    <div class="weui-cells">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="text" id="token" name="token" placeholder="请输入安全码">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-btn-area">
                    <button class="weui-btn weui-btn_primary" type="submit" id="submit">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    //文件上传事件
    var fileInput = document.getElementById('uploaderInput');
    $('#uploaderInput').bind('change', function () {
        // 检查文件是否选择:
        if (!fileInput.value) {
            $.toast("请选择文件", "forbidden");
            return;
        }
        // 获取File引用:
        var file = fileInput.files[0];
        // 读取文件:
        var reader = new FileReader();
        reader.onloadstart = function () {
            $.showLoading('loading');
        };
        reader.onload = function (e) {
            $.hideLoading();
            $("#filename").val(file.name);
            console.log(file)
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    });
</script>
</body>
</html>